<template>
    <div>
        <Header  back="Home"></Header>
        <div >
          <div class="writingBookLib">
            <div class="title">
              共有<span class="red">{{bookList.length}}</span>部作品
              <a @click="goCreatBook">创建新书</a>
            </div>
            <ul>
              <li v-for="(item,index) in bookList" :key="index">
                <div class="img">
                  <a >
                    <img :src="item.icon" />
                    <label :for="item.bookId" class="camera_input" @click="uoloadIcon(item)"></label>
                    <input type="file" :id="item.bookId" @change="fileChange" name="file"  ref="file" accept="image/png,image/gif,image/jpeg" style="display:none;">
                  </a>
                </div>
                  <h1>
                    <span><a>{{item.bookName}}</a></span>
                    <a class="bookManageBtn" @click="goManageBook(item)">作品管理</a>
                  </h1>
                  <p>状态: <span>{{item.checkInfo}}</span> </p>
                  <p>最新章节:</p> <p> <span>{{item.newChapterName}}</span> </p>
                </li>
            </ul>
          </div>
        </div>
        <divider>37K小说网 创作改变人生</divider>
    </div>
</template>

<script>
import Header from '@/components/commons/header/header'
import USER from '@/utils/user'
import bookController from '@/api/bookController/index'
import uploadFileApi from '@/api/uploadFile'

  export default {
      name:'library',
      data(){
      return {
        userInfo: null,
        bookList: [],
        uploadIcon:{
          id:null,
          icon:null
        }
        }
      },
      created(){
        this.getLoginInfo();
      },
      components:{Header},
      methods:{
        getLoginInfo(){ //获取登录信息,如果登录，重定向至登录页面
          var loginInfo = USER.getUserInfo();
          this.userInfo = loginInfo;
          if(loginInfo.isLogin==1){ //0已登录 1未登录
            this.$router.push({name:'login'})
            return false
          }else if(!loginInfo.userCustominfo5){//不存在笔名，非作者，跳转至创建笔名页面
            this.$router.push({name:'penName'});
            return false
          }
          this.getAuthorBook();
        },
        getAuthorBook(){ //获取作者书籍
          bookController.selectByAuthorId().then(response=>{
            if(response.success&&response.data){
              this.bookList = response.data.list
            }
          })
        },        
        goManageBook(item){//跳转作品管理
          this.$router.push({name:'getManageBookPage',params:item})
        },
        goCreatBook(){//跳转至书籍创建
          this.$router.push({name:'createBookPage'})
        },
        uoloadIcon(item){
          this.uploadIcon.id = item.bookId
        },
        fileChange(e){
          let file = e.target.files[0];
          let formData  = new FormData(); //创建form对象
          formData.append('pictureFile',file);//通过append向form对象添加数据
          formData.append('flag',1);
          uploadFileApi.uploadFile(formData).then(response=>{
            if(response.success){
              this.uploadIcon.icon = response.data.path;
              bookController.updateNovelCover(this.uploadIcon).then(response=>{
                if(response.success){
                   this.getAuthorBook();
                }                
              })
            }else{
              this.$vux.toast.show({
                text: '上传封面失败',
                type:'warn'
              })
            }
          })
        },
      }
    }
</script>

<style scoped>
.writingBookLib .title{
    background: #fff;
    font-size: 12px;
    color: #797979;
    padding:14px;
    margin-bottom: 14px;
}
.writingBookLib .title .red{
  color: #F60;
}
.writingBookLib .title a{
  display: inline-block;
  float: right;
  background: #FF6100;
  color: #fff;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  padding: 3px 5.5px;
}
  .writingBookLib ul {
    margin: 0;
    padding: 0 12px 12px 12px;
    background: #fff;
}
.writingBookLib ul li {
    list-style: none;
    padding: 12px 0;
    border-bottom: 1px solid #CDCDCD;
}
.writingBookLib ul li div.img {
    float: left;
    position: relative;
    margin-right: 12px;
}
.writingBookLib ul li .camera_input{
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  width:60px;
  height:86px;
  border:1px solid #000;
}
.writingBookLib ul li h1 {
    margin: 0;
    padding: 0 12px 0 0;
    font-size: 12px;
}
.writingBookLib ul li p {
    margin: 0;
    color: #BABABA;
    text-overflow: ellipsis;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    line-height: 20px;
    padding-right: 12px;
}
.writingBookLib ul li h1 {
    margin: 0;
    padding: 0 12px 0 0;
    font-size: 12px;
}
.writingBookLib ul li h1 span a {
    color: #666;
    display: inline-block;
    max-width: 50%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.writingBookLib ul li h1 a.bookManageBtn {
    float: right;
    padding: 1.5px 5.5px;
    font-size: 12px;
    color: #8FCDEC;
    border: 1px solid #8FCDEC;
    font-weight: normal;
}
.writingBookLib ul li p span {
    color: #EE5B23;
}
.writingBookLib ul li div.img img {
    vertical-align: top;
    width: 60px;
    height: 86px;
}

</style>
